<template>
  <div class="echarts-content">


  <img src="http://10.40.0.33:9001/file-storage/487396325012760576-source.svg" class="china-map-bg" alt="" />
    <div id="map"  class="echarts-main" ></div>
  </div>
</template>

<script setup>
    import { ref, onMounted, onBeforeUnmount } from 'vue'
    import * as echarts from 'echarts'
    import mapJson from './mapJson'
    const chartInstance = ref(null)

    const dataSource = ref({
        china: [
            {
                name: '北京市',
                value: 80,
                itemStyle: {
                    color: '#3875ff'
                }
            },
            { name: '上海市', value: 60 },
            { name: '广东省', value: 100 },
            { name: '浙江省', value: 75 },
            { name: '江苏省', value: 90 }
        ],
        provinces: {
            '北京市': [
                { name: '朝阳区', value: 30 },
                { name: '海淀区', value: 25 },
                { name: '东城区', value: 15 },
                { name: '西城区', value: 10 }
            ],
            '上海市': [
                { name: '浦东新区', value: 40 },
                { name: '徐汇区', value: 20 },
                { name: '黄浦区', value: 15 },
                { name: '静安区', value: 10 }
            ],
            '广东省': [
                { name: '广州市', value: 50 },
                { name: '深圳市', value: 30 },
                { name: '东莞市', value: 10 },
                { name: '佛山市', value: 10 }
            ],
            '浙江省': [
                { name: '杭州市', value: 40 },
                { name: '宁波市', value: 20 },
                { name: '温州市', value: 10 },
                { name: '绍兴市', value: 5 }
            ],
            '江苏省': [
                { name: '南京市', value: 40 },
                { name: '苏州市', value: 30 },
                { name: '无锡市', value: 10 },
                { name: '常州市', value: 10 }
            ]
        },
        cities: {
            '广州市': [
                { name: '天河区', value: 20 },
                { name: '越秀区', value: 15 },
                { name: '荔湾区', value: 10 },
                { name: '海珠区', value: 5 }
            ],
            '深圳市': [
                { name: '南山区', value: 15 },
                { name: '福田区', value: 10 },
                { name: '罗湖区', value: 5 }
            ],
            '杭州市': [
                { name: '西湖区', value: 15 },
                { name: '拱墅区', value: 10 },
                { name: '江干区', value: 10 },
                { name: '滨江区', value: 5 }
            ],
            '南京市': [
                { name: '玄武区', value: 10 },
                { name: '秦淮区', value: 10 },
                { name: '鼓楼区', value: 10 },
                { name: '建邺区', value: 10 }
            ]
        }
    })

    onMounted(() => {
        // 初始化 ECharts 实例
        chartInstance.value = echarts.init(document.getElementById('map'),null,{
          renderer: 'svg',
          devicePixelRatio: 2
        })

        // 加载全国地图数据
        loadChinaMap()
    })

    // 使用 axios 获取全国地图和项目数据
    function loadChinaMap() {
        const chinaGeoJson = mapJson

        echarts.registerMap('china', chinaGeoJson)

        // 使用 axios 获取项目数据
        const projectData = dataSource.value.china

        const option = {
            title: {
                text: '公司项目分布地图',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    const value = params.value || 0 // 如果没有数据，显示0
                    return `${params.name}: ${value} 项目`
                }
            },
            visualMap: {
                min: 0,
                max: 100,
                left: 'left',
                top: 'bottom',
                text: ['高', '低'],
                calculable: true,
                inRange: {
                    color: ['#FF8A73']
                },
                show: false // 确保visualMap被展示
            },
          // geo: [
          //   {
          //     map: 'chinaBoundary',
          //     // 避免边框选中，设置不响应事件
          //     silent: true,
          //     emphasis: {
          //       disabled: true
          //     },
          //     itemStyle: {
          //       normal: {
          //         borderWidth: 0,
          //         areaColor: 'rgba(0, 0, 0, 0)',
          //         borderColor: 'rgba(0, 0, 0, 0)'
          //       }
          //     }
          //   }
          // ],
            series: [
                {
                    name: '省份',
                    type: 'map',
                    map: 'china',
                  coordinateSystem: 'geo',
                    roam: true,
                    label: {
                        show: true,
                        formatter: '{b}',
                        position: 'inside'
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#f3f3f3', // 没有数据的区域颜色
                            borderColor: '#111'
                        },
                        emphasis: {
                            areaColor: '#f5b041', // 鼠标悬浮时高亮的颜色
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    data: projectData
                }
            ]
        }

        chartInstance.value.setOption(option)

        // 绑定地图点击事件
        chartInstance.value.on('click', params => {
            if (params.name) {
                loadProvinceMap(params.name)
            }
        })
    }

    // 使用 axios 获取省级地图和项目数据
    function loadProvinceMap(provinceName) {
      console.log(provinceName,'provinceName');
        // const provinceGeoJson = mapJson.features.find(item => item.properties.name == provinceName) // 省份对应的地图数据
        // console.log(provinceGeoJson, 'provinceGeoJson')
        // const projectData = dataSource.value.provinces[provinceName]
        // echarts.registerMap(provinceName, provinceGeoJson)
        //
        // const provinceOption = {
        //     title: {
        //         text: `${provinceName} 项目分布`,
        //         left: 'center'
        //     },
        //     tooltip: {
        //         trigger: 'item',
        //         formatter: '{b}'
        //     },
        //     visualMap: {
        //         min: 0,
        //         max: 100,
        //         left: 'left',
        //         top: 'bottom',
        //         text: ['高', '低'],
        //         calculable: true,
        //         inRange: {
        //             color: ['#e0ffff', '#006edd']
        //         }
        //     },
        //     series: [
        //         {
        //             name: '市级',
        //             type: 'map',
        //             map: provinceName,
        //             roam: true,
        //             label: {
        //                 show: true,
        //                 formatter: '{b}',
        //                 position: 'inside'
        //             },
        //             data: projectData
        //         }
        //     ]
        // }
        //
        // chartInstance.value.setOption(provinceOption)
        //
        // // 在省级视图上再绑定点击事件，实现市级下钻
        // chartInstance.value.on('click', params => {
        //     // TODO: 实现市级下钻
        // })
    }

    onBeforeUnmount(() => {
        if (chartInstance.value) {
            chartInstance.value.dispose()
        }
    })
</script>
<style lang="less" scoped>
.echarts-main {
  width: 1126px;
  height: 2000px;
  position: relative;
  transform: translateY(-450px);
}
.china-map-bg {
  position: absolute;
  top: 62px;
  left: 112px;
  width: 898px;
  height: 730px;
}
.echarts-content {
  margin-left: 7%;
  width: 1126px;
  height: 794px;
  position: relative;
  overflow: hidden;
  transform: scale(1, 0.87);
  transform-origin: 0 0;
}
</style>
